<template>
	<el-main id="main" class="layout-main">
		<el-scrollbar :style="mainHeightStyle()" class="layout-main-scrollbar" wrap-class="scrollbar-wrapper">
			<router-view v-slot="{Component, route}">
				<transition :name="webConfigStore.layout.mainAnimation" mode="out-in">
					<keep-alive :include="navTabsStore.keepAliveTabNames">
						<component :is="Component" :key="navTabsStore.componentKey"/>
					</keep-alive>
				</transition>
			</router-view>
		</el-scrollbar>
	</el-main>
	<el-backtop :bottom="20" :right="20" :visibility-height="1" target=".scrollbar-wrapper"/>
	<icp/>
</template>

<script lang="ts" setup>
import {mainHeightStyle} from '@/utils/layoutUtil'
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {useNavTabsStore} from '@/stores/modules/navTabs.store'
import {useRoute} from 'vue-router'
import {watch} from 'vue'
import Icp from '@/components/icp.vue'

const webConfigStore = useWebConfigStore()
const navTabsStore = useNavTabsStore()
const route = useRoute()

watch(() => route.path, value => {
	navTabsStore.componentKey = value
}, {
	immediate: true
})

</script>

<style lang="scss" scoped>
.layout-container .layout-main {
	height: 100%;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.layout-main-scrollbar {
	overflow: hidden;
	position: relative;
	width: 100%;
}
</style>
